// ==============================================
// 智能体问答系统 - 样式变量定义
// ==============================================

// 色彩系统
// ----------------------------------------------

// 主色调
$primary-color: #409eff;
$primary-light-1: #53a8ff;
$primary-light-2: #66b1ff;
$primary-light-3: #79bbff;
$primary-light-4: #8cc5ff;
$primary-light-5: #a0cfff;
$primary-light-6: #b3d8ff;
$primary-light-7: #c6e2ff;
$primary-light-8: #d9ecff;
$primary-light-9: #ecf5ff;

$primary-dark-1: #3a8ee6;
$primary-dark-2: #337ecc;

// 功能色彩
$success-color: #67c23a;
$success-light: #95d475;
$success-lighter: #e1f3d8;

$warning-color: #e6a23c;
$warning-light: #ebb563;
$warning-lighter: #faecd8;

$danger-color: #f56c6c;
$danger-light: #f78989;
$danger-lighter: #fde2e2;

$info-color: #909399;
$info-light: #a6a9ad;
$info-lighter: #e9e9eb;

// 中性色彩
$white: #ffffff;
$black: #000000;

// 文本色彩
$text-color-primary: #303133;
$text-color-regular: #606266;
$text-color-secondary: #909399;
$text-color-placeholder: #c0c4cc;
$text-color-disabled: #c0c4cc;

// 边框色彩
$border-color: #dcdfe6;
$border-color-light: #e4e7ed;
$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;

// 背景色彩
$bg-color: #ffffff;
$bg-color-page: #f2f3f5;
$bg-color-overlay: #ffffff;

// 暗色主题
// ----------------------------------------------

// 暗色背景
$dark-bg-color: #141414;
$dark-bg-color-page: #0a0a0a;
$dark-bg-color-overlay: #1d1e1f;
$dark-bg-color-darker: #262727;

// 暗色文本
$dark-text-color-primary: #e5eaf3;
$dark-text-color-regular: #cfd3dc;
$dark-text-color-secondary: #a3a6ad;
$dark-text-color-placeholder: #8d9095;
$dark-text-color-disabled: #6c6e72;

// 暗色边框
$dark-border-color: #4c4d4f;
$dark-border-color-light: #414243;
$dark-border-color-lighter: #363637;
$dark-border-color-extra-light: #2b2b2c;

// 智能体专用色彩
// ----------------------------------------------

// 消息类型色彩
$message-user-bg: #f0f9ff;
$message-assistant-bg: #f8fafc;
$message-system-bg: #fef7ec;
$message-error-bg: #fef2f2;

$dark-message-user-bg: #1e3a8a;
$dark-message-assistant-bg: #1f2937;
$dark-message-system-bg: #451a03;
$dark-message-error-bg: #7f1d1d;

// 任务状态色彩
$task-pending: #fbbf24;
$task-running: #3b82f6;
$task-completed: #10b981;
$task-failed: #ef4444;
$task-cancelled: #6b7280;

// MCP服务状态色彩
$mcp-active: #10b981;
$mcp-inactive: #6b7280;
$mcp-error: #ef4444;
$mcp-healthy: #10b981;
$mcp-unhealthy: #ef4444;

// 尺寸系统
// ----------------------------------------------

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-xxl: 24px;
$spacing-xxxl: 32px;

// 组件尺寸
$component-size-large: 40px;
$component-size-default: 32px;
$component-size-small: 24px;

// 圆角
$border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-round: 20px;
$border-radius-circle: 50%;

// 阴影
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

// 布局变量
// ----------------------------------------------

// 断点
$breakpoint-xs: 0px;
$breakpoint-sm: 768px;
$breakpoint-md: 1024px;
$breakpoint-lg: 1280px;
$breakpoint-xl: 1536px;
$breakpoint-xxl: 1920px;

// 头部高度
$header-height: 60px;
$footer-height: 40px;

// 侧边栏
$sidebar-width: 280px;
$sidebar-collapsed-width: 64px;

// 右侧面板
$right-panel-width: 320px;
$bottom-panel-height: 200px;

// Z-index 层级
// ----------------------------------------------
$z-index-normal: 1;
$z-index-top: 1000;
$z-index-popper: 2000;
$z-index-dialog: 3000;
$z-index-message: 4000;
$z-index-loading: 5000;

// 动画变量
// ----------------------------------------------
$transition-duration: 0.3s;
$transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);

$transition-all: all $transition-duration $transition-function-ease-in-out-bezier;
$transition-fade: opacity $transition-duration $transition-function-fast-bezier;
$transition-md-fade: transform $transition-duration $transition-function-fast-bezier, opacity $transition-duration $transition-function-fast-bezier;
$transition-border: border-color $transition-duration $transition-function-ease-in-out-bezier;
$transition-box-shadow: box-shadow $transition-duration $transition-function-ease-in-out-bezier;
$transition-color: color $transition-duration $transition-function-ease-in-out-bezier;

// 字体变量
// ----------------------------------------------
$font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
$font-family-mono: 'SFMono-Regular', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-base: 14px;
$font-size-small: 13px;
$font-size-extra-small: 12px;

$font-weight-primary: 500;
$font-weight-bold: 700;

// 组件特定变量
// ----------------------------------------------

// 聊天区域
$chat-message-padding: 16px 20px;
$chat-message-margin: 12px 0;
$chat-message-border-radius: 12px;
$chat-input-height: 120px;
$chat-input-max-height: 200px;

// 任务卡片
$task-card-padding: 16px;
$task-card-border-radius: 8px;
$task-card-margin: 8px 0;
$task-progress-height: 6px;

// MCP服务卡片
$mcp-card-padding: 20px;
$mcp-card-border-radius: 8px;
$mcp-card-margin: 16px 0;

// 执行状态
$execution-timeline-width: 2px;
$execution-progress-height: 8px;
$execution-log-line-height: 1.5;

// 响应式布局 Mixins
// ----------------------------------------------

@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (min-width: #{$breakpoint-xs}) {
      @content;
    }
  }
  @else if $breakpoint == sm {
    @media (min-width: #{$breakpoint-sm}) {
      @content;
    }
  }
  @else if $breakpoint == md {
    @media (min-width: #{$breakpoint-md}) {
      @content;
    }
  }
  @else if $breakpoint == lg {
    @media (min-width: #{$breakpoint-lg}) {
      @content;
    }
  }
  @else if $breakpoint == xl {
    @media (min-width: #{$breakpoint-xl}) {
      @content;
    }
  }
  @else if $breakpoint == xxl {
    @media (min-width: #{$breakpoint-xxl}) {
      @content;
    }
  }
}

// 工具 Mixins
// ----------------------------------------------

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin scrollbar-style {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.3);
    border-radius: 3px;
    
    &:hover {
      background-color: rgba(144, 147, 153, 0.5);
    }
  }
}

@mixin card-style {
  background: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color);
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-base;
  transition: $transition-box-shadow;

  &:hover {
    box-shadow: $box-shadow-light;
  }
}

@mixin dark-mode {
  &.dark {
    @content;
  }
}

// 动画 Keyframes
// ----------------------------------------------

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes typing {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

// 流式动画
@keyframes streamingDots {
  0%, 20% {
    color: transparent;
    text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
  }
  40% {
    color: currentColor;
    text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
  }
  60% {
    text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 transparent;
  }
  80%, 100% {
    text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 currentColor;
  }
}